<template>
    <div class="table-container">
        <div class="table-content">
            <el-table
                :data="data"
                v-loading="loading"
                ref="table"
                :header-cell-style="config.headerCellStyle"
                :cell-style="config.cellStyle"
                :border="config.border"
                @selection-change="handleSelectionChange"
                :show-summary="config.showSummary"
                @sort-change="handleSortChange"
                style="width: 100%"
            >
                <el-table-column
                    v-if="config.showSelection"
                    :selectable="config.selectable"
                    type="selection"
                    align="center"
                    width="50"
                ></el-table-column>
                <el-table-column
                    v-if="config.showIndex"
                    type="index"
                    label="序号"
                    :index="indexMethod"
                    align="center"
                    width="80"
                ></el-table-column>
                <el-table-column
                    v-for="(column, index) in columns"
                    :key="index"
                    :fixed="column.fixed"
                    :prop="column.prop"
                    :label="column.label"
                    :width="column.width"
                    :min-width="
            column.minWidth ? column.minWidth : column.width ? '' : 120
          "
                    :sortable="column.sortable"
                    :show-overflow-tooltip="column.showOverflowTooltip"
                    :align="column.align || 'center'"
                >
                    <template #default="scope">
                        <div v-if="column.slot">
                            <slot
                                :name="column.slot"
                                :callback="{ row: scope.row, index: scope.$index }"
                            ></slot>
                        </div>
                        <span v-else-if="column.price">
                            {{
                            scope.row[column.prop]
                            }}
                        </span>
                        <span v-else-if="column.time">
                            {{
                            formatDate(scope.row[column.prop])
                            }}
                        </span>
                        <span v-else>{{ getKeyValue(scope.row, column.prop) }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div
            class="table-pagination"
            :style="{ textAlign: pagination.align || 'center' }"
            v-if="pagination.show === undefined ? true : pagination.show"
        >
            <el-pagination
                size="small"
                ref="pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[15, 30, 60, 120]"
                :current-page="pagination.currentPage || 1"
                :page-size="pagination.pageSize || 15"
                :layout="pagination.layout || 'total, sizes, prev, pager, next, jumper'"
                :total="pagination.total || 0"
            >
                <!-- <span class="el-pagination__total">Total {{ pagination.total }}</span> -->
            </el-pagination>
        </div>
    </div>
</template>

<script setup>
import { formatDate } from '@/utils/index'
const emit = defineEmits(['emitSelection', 'currentChange', 'handleSizeChange', 'sortChange'])
const props = defineProps({
    data: {
        type: Array,
        default: () => []
    },
    columns: {
        type: Array,
        required: true,
        default: () => []
    },
    pagination: {
        type: Object
    },
    loading: {
        type: Boolean,
        default: false
    }
})
const internalInstance = getCurrentInstance()
const attrs = internalInstance && internalInstance.attrs ? internalInstance.attrs : {};
const config = ref(attrs)
const multipleSelection = ref([])

function getKeyValue (row, prop) {
    const arr = prop.split(".");
    if (arr.length > 1) {
        let lastKey = row;
        arr.some(element => {
            if (lastKey[element]) {
                lastKey = lastKey[element];
            } else {
                return true;
            }
        });
        if (typeof lastKey === "string") {
            return lastKey;
        } else {
            return "";
        }
    } else {
        return row[prop];
    }
}
function indexMethod (index) {
    return (
        index +
        ((props.pagination.currentPage || 1) - 1) *
        (props.pagination.pageSize || 15) +
        1
    );
}
function handleSelectionChange (val) {
    multipleSelection.value = val;
    emit("emitSelection", val);
}
function handleCurrentChange (val) {
    emit("currentChange", val);
}
function handleSizeChange (val) {
    emit("handleSizeChange", val);
}
function handleSortChange (val) {
    emit("sortChange", val);
}
</script>

<style lang="scss" scoped>
.table-pagination {
    padding: 15px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.table-content .el-table .sort-caret.ascending {
    color: #ccc;
}
</style>
